<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <title>Docker Lightop</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="shortcut icon" href="/favicon.ico">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="bower_components/bootstrapvalidator/dist/css/bootstrapValidator.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
  </head>
  <body>
    <!--[if lt IE 10]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Docker Lightop</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#account">Account</a></li>
            <li><a href="#container">Container</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">
      <!-- [Modal Collection] -->
      <div>
        <!-- [Modal: login] -->
        <div>
          <div class="modal fade" id="login-modal">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                  <h4 class="modal-title">Login</h4>
                  <div class="bg-danger" id="login-msg"></div>
                </div>
                <div class="modal-body">
                  <form class="form-horizontal" role="form">
                    <div class="form-group">
                      <label for="login-username" class="col-sm-2 control-label">
                        <span class="glyphicon glyphicon-user"></span>
                      </label>
                      <div class="col-sm-10">
                        <input type="username" class="form-control" id="login-username" placeholder="Username">
                      </div>
                    </div>

                    <div class="form-group">
                      <label for="login-password" class="col-sm-2 control-label">
                        <span class="glyphicon glyphicon-lock"></span>
                      </label>
                      <div class="col-sm-10">
                        <input type="password" class="form-control" id="login-password" placeholder="Password">
                      </div>
                    </div>

                    <div class="form-group">
                      <label for="optionSession" class="col-sm-2 control-label">
                        <span class="glyphicon glyphicon-home"></span>
                      </label>
                      <!-- Split button -->
                      <div class="col-sm-10 btn-group">
                        <input type="hidden" id="login-session" name="session">
                        <button type="button" class="btn btn-default" id="login-session-name" data-toggle="dropdown">
                        </button>
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                          <span class="caret"></span>
                          <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu" role="menu"></ul>
                      </div>
                    </div>
                  </form>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-primary" id="btn-sign-in">Sign In</button>
                </div>
              </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
          </div><!-- /.modal -->
        </div>

        <!-- [Modal: add user] -->
        <div>
          <div class="modal fade" id="add-user-modal">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                  <h4 class="modal-title">Add User</h4>
                </div>
                <div class="modal-body">
                  <form class="form-horizontal" role="form">
                    <div class="form-group">
                      <label for="add-username" class="col-sm-2 control-label">Username</label>
                      <div class="col-sm-10">
                        <input type="username" class="form-control" id="add-username" placeholder="Username">
                      </div>
                    </div>

                    <div class="form-group">
                      <label for="add-password" class="col-sm-2 control-label">Password</label>
                      <div class="col-sm-10">
                        <input type="password" class="form-control" id="add-password" placeholder="Password">
                      </div>
                    </div>
                  </form>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary" id="btn-add-user">Add</button>
                </div>
              </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
          </div><!-- /.modal -->
        </div>

        <!-- [Modal: delete user] -->
        <div>
          <div class="modal fade" id="del-user-modal">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                  <h4 class="modal-title">Delete User</h4>
                </div>
                <div class="modal-body">
                  <input type="hidden" id="del-user-id">
                  Username: <p></p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary" id="btn-del-user">Delete</button>
                </div>
              </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
          </div><!-- /.modal -->
        </div>

        <!-- [Modal: delete container] -->
        <div>
          <div class="modal fade" id="del-container-modal">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                  <h4 class="modal-title">Delete Container</h4>
                </div>
                <div class="modal-body">
                  <input type="hidden" id="del-container-id">
                  Container: <p></p>
                  Session: <p></p>
                  Owner: <p></p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary" id="btn-del-container">Delete</button>
                </div>
              </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
          </div><!-- /.modal -->
        </div>
      </div>

      <!-- [Account Page] -->
      <div class="table-responsive" id="layout-account">
        <button type="button" class="btn btn-default pull-right" style="margin: 15px 0 15px 0;" data-toggle="modal" data-target="#add-user-modal">Add</button>

        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th>#</th>
              <th>User</th>
              <th>Volume</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody id="tbody-account"></tbody>
        </table>
      </div>

      <!-- [Container Page] -->
      <div class="table-responsive container-block" id="layout-container">
        <table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th>Container</th>
              <th>Session</th>
              <th>Owner</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody id="tbody-container"></tbody>
        </table>
      </div>
    </div>

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/bootstrapvalidator/dist/js/bootstrapValidator.js"></script>
    <script src="bower_components/jquery-sapzxc-hashchange/jquery.ba-hashchange.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <!--
    <script>
      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
      e.src='//www.google-analytics.com/analytics.js';
      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
      ga('create','UA-XXXXX-X');ga('send','pageview');
    </script>
    -->

    <!-- build:js(.) scripts/plugins.js -->
    <script src="bower_components/bootstrap/js/affix.js"></script>
    <script src="bower_components/bootstrap/js/alert.js"></script>
    <script src="bower_components/bootstrap/js/dropdown.js"></script>
    <script src="bower_components/bootstrap/js/tooltip.js"></script>
    <script src="bower_components/bootstrap/js/modal.js"></script>
    <script src="bower_components/bootstrap/js/transition.js"></script>
    <script src="bower_components/bootstrap/js/button.js"></script>
    <script src="bower_components/bootstrap/js/popover.js"></script>
    <script src="bower_components/bootstrap/js/carousel.js"></script>
    <script src="bower_components/bootstrap/js/scrollspy.js"></script>
    <script src="bower_components/bootstrap/js/collapse.js"></script>
    <script src="bower_components/bootstrap/js/tab.js"></script>
    <!-- endbuild -->

    <!-- build:js({app,.tmp}) scripts/main.js -->
    <script src="scripts/api.js"></script>
    <script src="scripts/ui-control.js"></script>
    <script src="scripts/register.js"></script>
    <!-- endbuild -->

    <script>
      ui.do_switch_navbar();
      api.session_list(ui.bind_login_session);
      api.user_list(ui.bind_user_data);
      api.container_list(ui.bind_container_data);

      $('#login-modal').modal();
    </script>
</body>
</html>
